<template>
  <div class="bg1" id="bg1">
     <div v-watermark="{text:'健康险广东分公司',textColor:'rgba(255, 255, 255, 0.5)'}">
      <div class="text-img" >
      <div class="text-img-box">
        <img src="@/assets/text1.png" alt="" />
      </div>
    </div>
    
    <Clipper tType= '2' />
    <div class="form-box" >
      <div class="fr" style="min-width:170px;">
        <div class="item" >
          <mt-field
            class="t2"
            placeholder="请输入姓名"
            style="width:50%margin-left:110px;"
            v-model="username"
          ></mt-field>
        </div>
         <div class="item" >
          <mt-field
            class="t2"
            placeholder="请输入电话"
            style="width:50%margin-left:110px;"
            v-model="telphone"
          ></mt-field>
        </div>
      </div>
      <qrcode />
    </div>
    <div class="table-img">
      <img src="@/assets/table.png" alt="" />
    </div>
    <btn v-if="showBtn" />
    <div class="layer" v-if="popupVisible" @click="popupVisible = false">
      <div v-if="!showLoading">
        <div class="save">长按保存图片</div>
        <div class="htmlimg" >
          <img :src="htmlurl" alt="" />
        </div>
      </div>
      <div class="loading" v-if="showLoading">
        <img src="@/assets/tip.gif" alt="" />
      </div>
    </div>
     </div>
    
  </div>
</template>
<script>
import qrcode from "./Qrcode";
import btn from "./Btn";
import html2canvas from "html2canvas";
// import Upload from './Upload'
import Clipper from './Clipper'
export default {
  components: {
    qrcode,
    btn,
    Clipper
    // Upload
  },
  data() {
    return {
      htmlurl: "",
      username: "",
      telphone:'',
      email: "",
      password: "",
      popupVisible: false,
      showBtn: true,
      showLoading: false,
     
    };
  },
  created() {
    
  },
  mounted() {
    this.bus.$on("creatImg", () => {
      this.showBtn = false;
      this.showLoading = true;
      this.$nextTick(() => {
        html2canvas(document.getElementById("bg1"), {
          backgroundColor: null,
          logging: false,
          allowTaint: true,
          useCORS: true
        })
          .then(canvas => {
            let dataURL = canvas
              .toDataURL("image/png")
              .replace("image/png", "image/octet-stream");
            this.htmlurl = dataURL;
            if (this.htmlurl !== "") {
              setTimeout(this.loading, 1000);
              this.popupVisible = true;
              this.showBtn = true;
              clearTimeout(this.loading);
            }
          })
          .catch();
      });
    });
  },
  methods: {
    loading() {
      this.showLoading = false;
    },
    getObjectURL(file) {
      let url = null;
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file);
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file);
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file);
      }
      return url;
    }
  }
};
</script>

<style scoped lang="less">

</style>
